<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8" />
	<title>Vue-router</title>
	<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script> 
</head>
<body>
<div id="app5">
    <h1>vue-router 路由命名</h1>
    <p>{{ message}}</p> 
    <p>  <span style="color:red;">有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。</span></p>
  
     <p><router-link  :to="{ name: 'vueTo'  , params: { id: 123 } }">to 123 </router-link></p>
     
       <p><router-link  :to="{ name: 'vueTo'  , params: { id: 999 } }">to 999 </router-link></p>
     <router-view></router-view>
</div>
</body>
<script>
var luyou5 = new VueRouter({
	routes : [
	          {
	        	  path : "/to/:id" ,  //命名路由的传参类似于动态路由 但是更好理解
	        	  name : "vueTo",
	        	  component: {
	        		  template : "<div> {{ $route.params.id }}   </div>"
	        		  
	        	  }
	        	  
	          
	          }
	      ]
	
});

new Vue({
	el : "#app5", 
	router : luyou5,
	data : {
		message  : "命名路由的学习 模板里不用路径匹配视图 直接使用:to链接命名的视图 (命名路由的传参类似于动态路由 但是更易于理解)"
	}
	
});

</script>
</html>